<template>
    <div >
      <!-- 搜索框部分 -->
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="手机号码:">
              <el-input v-model="QueryCustomer.phone" placeholder="请输入会员电话" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="昵称:" style="margin-left:2%">
              <el-input v-model="QueryCustomer.name" placeholder="请输入会员昵称" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="会员等级:" style="margin-left:2%">
              <el-select v-model="QueryCustomer.level" placeholder="请选择会员等级">
                <el-option
                    v-for="item in levels"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序方式:" style="margin-left:2%">
              <el-select v-model="QueryCustomer.orderBy" placeholder="请选择排序方式">
                <el-option
                    v-for="item in ordersList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="margin-left: 2%">
<!--              搜索框-->
              <el-button icon="el-icon-search" circle @click="queryList"></el-button>
              <el-button type="warning" @click="dialogInsertVisible = true" >录入</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
<!--      表格栏-->
      <!-- 表格部分 -->
      <el-row>
        <el-col :span="24">
          <el-table :data="customersList" stripe style="width: 100%;" >
            <el-table-column prop="id" v-if="false">
            </el-table-column>
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="昵称" width="80" align="center">
            </el-table-column>
            <el-table-column prop="level" label="会员等级" width="50" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="140" align="center">
            </el-table-column>
            <el-table-column prop="point" label="积分余额" width="80" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="开卡时间" width="120" :formatter='dateFormat' align="center">
            </el-table-column>
            <el-table-column prop="customNumber" label="消费次数" width="80" align="center">
            </el-table-column>
            <el-table-column prop="customMoney" label="消费金额" width="120" align="center">
            </el-table-column>
            <el-table-column prop="reRatio" label="退换货比例" width="120" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="180" align="center">
            </el-table-column>

            <el-table-column label="操作" width="280" align="center">
              <template slot-scope="scope">
                <el-button type="primary" round size="mini" @click="goUpdate(scope.row)">修改</el-button>
                <el-button type="success" round size="mini" @click="deleteCtm(scope.row)">删除</el-button>
                <el-button type="danger" round size="mini" @click="insertBlackList(scope.row)">加入黑名单</el-button>
              </template>

            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block">
            <el-pagination layout="prev, pager, next" @next-click="nextPage" @prev-click="prevClick"
                           @current-change="currentChange" :page-size=QueryCustomer.pageSize :page-count=QueryCustomer.pageCount :current-page=QueryCustomer.pageNo
                           :total=QueryCustomer.total>
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <el-dialog title="新增/修改会员" :visible.sync="dialogInsertVisible">
        <el-form>

          <el-form-item label="会员昵称" style="margin-left:25%">
            <el-input v-model="insertCustomer.name" placeholder="请输入会员昵称" style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item label="会员等级" style="margin-left:25%">
            <el-select v-model="insertCustomer.level" placeholder="请选择会员等级" style="width: 280px">
              <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话号码" style="margin-left:25%">
            <el-input v-model="insertCustomer.phone" placeholder="请输入会员电话号码" style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item label="开卡日期" style="margin-left:25%">
            <div class="block">
              <el-date-picker
                  v-model="insertCustomer.createTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-form-item>

          <el-form-item label="会员备注" style="margin-left:25%">
            <el-input v-model="insertCustomer.remark" placeholder="请输入会员备注" style="width: 280px;"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="insertCustomerCancle()">取 消</el-button>
          <el-button type="primary" @click="doInsertCustomer()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
export default{
    data(){
        return{
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          dialogInsertVisible:false,
          isUpdate:false,
          customersList:[],
          insertCustomer:{name:'',level:'',phone:'',remark:'',id:'',createTime:'',account:''},
          QueryCustomer:{phone:'',level:'',name:'',orderBy:'T',pageNo: 1, pageSize: 10, total: 1, pageCount: 1}, //搜索框手机号码/会员等级/昵称
          levels:[{  //搜索框会员等级的下拉菜单
            value: '',
            label: '全部'
          }, {
            value: '钻石',
            label: '钻石'
          }, {
            value: '黄金',
            label: '黄金'
          }],
          ordersList:[{
            value:'N',
            label: '按消费次数排序'
          },{
            value:'M',
            label: '按消费总金额排序'
          },{
            value:'T',
            label: '按开卡时间排序'
          }],

        }
    },
  methods:{
    insertBlackList(row){
      let jwt = localStorage.getItem("jwt");
      this.$axios.get('api/customer/insertBlackList?account='+row.account,{ headers: { 'jwt': jwt } }).then(res =>{
        console.log(res.data);
        this.queryList();
      });
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      var strDate =
          year +
          "/" +
          dateArr[0] +
          "/" +
          dateArr[1] ;
      this.insertCustomer.createTime = strDate;
      console.log("当前新增会员开卡时间:"+this.insertCustomer.createTime);
    },
    goUpdate(row){
      this.insertCustomer.id = row.id;
      this.insertCustomer.name = row.name;
      this.insertCustomer.level = row.level;
      this.insertCustomer.phone = row.phone;
      this.insertCustomer.remark = row.remark;
      this.insertCustomer.createTime = row.createTime;

      this.isUpdate = true;
      this.dialogInsertVisible = true;
    },
    doInsertCustomer(){
      //判断是否是update
      if (this.isUpdate){
        //是update
        var url = 'api/customer/updateCustomer';
      }else{
        var url ='api/customer/insertCustomer';
      }
      let jwt = localStorage.getItem("jwt");
      this.$axios.post(url,this.insertCustomer,{ headers: { 'jwt': jwt } }).then(res =>{
        console.log(res.data);
        if (res.data.code == 200){
          //新增成功!
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
          this.dialogInsertVisible =false;
          this.insertCustomer = {name:'',level:'',phone:'',remark:'',id:''};
          this.queryList();
        }else{
          this.$message({
            type: 'info',
            message: '新增失败,请联系管理员!'
          });
        }
      });
    },
    insertCustomerCancle(){
      this.insertCustomer = {name:'',level:'',phone:'',remark:'',id:''};
      this.isUpdate = false;
      this.dialogInsertVisible = false;
    },
    deleteCtm(row){
      let jwt = localStorage.getItem("jwt");
      console.log(row.id);
      this.$axios.get('/api/customer/deleteCustomer?id='+row.id,{ headers: { 'jwt': jwt } }).then(res =>{
        console.log(res.data);
        if (res.data.code == 200){
          //删除成功
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.queryList();
        }else{
          this.$message({
            type: 'info',
            message: '删除失败!'
          });
        }
      });
    },
    dateFormat(row) {
      var t=new Date(row.createTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
      return t.getFullYear()+"-"+(t.getMonth()+1)+ "-"+t.getDate();
    },
    queryList(){
      let jwt = localStorage.getItem("jwt");
      this.$axios.post('api/customer/queryCustomer',this.QueryCustomer,{ headers: { 'jwt': jwt } }).then(res => {
        console.log(res.data);
        this.customersList = res.data.data;
        this.QueryCustomer.pageNo = res.data.pageNo;
        this.QueryCustomer.pageCount  = res.data.pageCount;
        this.QueryCustomer.total = res.data.total;
        this.QueryCustomer.name='';
        this.QueryCustomer.phone='';
        this.QueryCustomer.level='';
      });
    },
    nextPage(pageNo) {
      this.QueryCustomer.pageNo = pageNo;
      this.queryList();
    },
    prevClick(pageNo) {
      this.QueryCustomer.pageNo = pageNo;
      this.queryList();
    },
    currentChange(pageNo) {
      this.QueryCustomer.pageNo = pageNo;
      this.queryList();
    },
  },
  created:function (){
    this.queryList();
  }
}
</script>

<style scoped>

</style>